<style>
  .list-item {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s linear;
    contain: content; /* see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content */
  }

  .list-item.shown {
    opacity: 1;
    pointer-events: auto;
  }
</style>
<div class="list-item {shown && 'shown'}"
     id={`list-item-${key}`} >
  <svelte:component this={component}
              virtualProps={props}
              virtualIndex={index}
              virtualLength={length}
              virtualKey={key}
  />
</div>
<script>
  import { doubleRAF } from '../../_utils/doubleRAF.js'

  export default {
    oncreate () {
      doubleRAF(() => {
        this.set({ shown: true }) // ensure fade-in animation happens after rAF
      })
    },
    data: () => ({
      shown: false
    })
  }
</script>
